import React from 'react'
import {NavLink} from 'react-router-dom'
import { connect } from 'react-redux'
import BuyDiamond from './mall/BuyDiamond'
import './mallStyle.less'
import classnames from 'classnames'

interface DiamondItem {
  goodsName: string,
  count: number,
  giveAway: number,
  price: number
}

const mapStateToProps = (state) => {
  return {
    mallItems: state.mall.diamonds,
    clubUrl: state.app.clubUrl
    
  }
}

const PriceTag = (props) => {
  const numbers = (props.price + '').split('')
  return <div className="price-tag">
    {/* <img className="price-btn" src="img/mall/btn.png" alt="" /> */}
    <span>{props.price}元</span>
    {/* {numbers.map((num, index) => {
      const src = `img/mall/numbers/${num === '.' ? 'dian' : num}.png`
      return <img key={index} src={src} className="price-number" alt="" />
    })}元 */}
  </div>
}

const DiamondIcon = (props) => {
  let img
  if (props.item.count <= 10) {
    img = 'img/mall/diamonds/one.png'
  } else if (props.item.count <= 20) {
    img = 'img/mall/diamonds/two.png'
  } else if (props.item.count <= 30) {
    img = 'img/mall/diamonds/three.png'
  } else if (props.item.count <= 50) {
    img = 'img/mall/diamonds/four.png'
  } else if (props.item.count <= 100) {
    img = 'img/mall/diamonds/five.png'
  } else {
    img = 'img/mall/diamonds/six.png'
  }
  return <div className="full">
    <img className="diamond-icon" src={img} alt=""/>
    <span className="diamond-count">{props.item.count + props.item.giveAway}钻石</span>
  </div>
}

class Mall extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      showBuyDialog: false,
      buyItem: {},
      cluburl: '',
      isAndroid: false,

    }
  }

  public componentDidMount() {
    this.setState({cluburl: `${config.pre}/login/weiXin/${Cookies.get('areaCode')}?type=10106`})
    if(window.navigator) {
      if(window.navigator.appVersion.match(/Android/i)) {
        this.setState({
          isAndroid: true
        })
      }
    }
  }

  public buyDiamond(item, event) {
    console.log(item, event)
    this.setState({showBuyDialog: true, buyItem: item})
  }

  preventClick(e) {
    e.preventDefault()
  }

  public render() {
    let {isAndroid} = this.state
    let mallClass =  classnames({
      'view-page': true,
      ' mall-container': true,
      'is-android': isAndroid
    })
    return (
      <div className={mallClass}>
        <div className="mall-top text-center">
          {/*<img src="img/mall/red-person.png" className="red-person animated fadeInDown" alt=""/>*/}
          {/*<img src="img/app/jiutian-hy-text.png" className="shuai-text animated infinite" alt=""/>*/}
          <img src="img/mall/float-light.png" className="float-light animated flash" alt=""  onClick={this.preventClick.bind(this)}/>
          <img src="img/mall/lantern-flash.png" className="mall-light animated flash" alt=""  onClick={this.preventClick.bind(this)}/>
          {/* <img src="img/mall/mall-title.png" className="mall-title" alt=""/> */}
        </div>
        <div className="mall-middle">
          <img src="img/mall/mall-middle-bg.png" className="mall-middle-bg" alt="" onClick={this.preventClick.bind(this)}/>
          <ul>
            {
              this.props.mallItems.map((item, index) => {
                return <li className="pure-g" key={index}>
                  <div className="pure-u-2-3">
                    <DiamondIcon item={item}></DiamondIcon>
                  </div>
                  <div className="pure-u-1-3 price-tag-wrapper" onClick={this.buyDiamond.bind(this, item)}>
                    <PriceTag price={item.price}></PriceTag>
                  </div>
                </li>
              })
            }
          </ul>
        </div>
        {/* <div className="usercenter-bottom">
          <img className="bar" src="img/app/kuang-bottom.png" alt=""/>
          <div className="text"><span>商城</span></div>
          <NavLink to="/App"><img className="back" src="img/app/back.png" alt=""/></NavLink>
        </div> */}
        <div className="home-nav">
          <img src="img/app/nav-di.png" className="full-width pos-abs di" alt="" />
          <div className="pure-g text-center">
            <div className="pure-u-1-4">
              {/*<img src="img/app/nav-selected.png" className="nav-selected" alt="" />*/}
              <NavLink to="/Mall"><img src="img/app/nav-mall.png" className="btn" alt=""/></NavLink>
            </div>
            <div className="pure-u-1-4">
              <a href={this.props.clubUrl}><img src="img/app/lower-club.png" className="btn" alt="" /></a>
            </div>
            <div className="pure-u-1-4">
              <NavLink to="/App"><img src="img/app/nav-home.png" className="btn" alt=""/></NavLink>
            </div>
            <div className="pure-u-1-4">
              <NavLink to="/UserCenter"><img src="img/app/nav-my.png" className="btn" alt=""/></NavLink>
            </div>
          </div>
        </div>
        {
          this.state.showBuyDialog ? <BuyDiamond item={this.state.buyItem} close={() => this.setState({showBuyDialog: false})}></BuyDiamond> : null
        }
      </div>
    )
  }

}
export default connect(mapStateToProps)(Mall)